<template>
  <div class="echartsDiv">
    <div class="titleDiv clearFloat">
      <div class="lf lineDiv"></div>
      <p class="lf titleP">学时积分统计</p>
      <div class="rf">
        <p class="lf labelP">选择时间：</p>
        <div class="lf">
          <a-range-picker
            :defaultValue="[$util.moment(searchParams.bgTm),$util.moment(searchParams.endTm)]"
            :format="$defaultSettings.dateFormat"
            @change="onChange"/>
        </div>
        <a-button type="primary" class="lf" @click="getList" :loading="loading">
          查询
        </a-button>
      </div>
    </div>
    <div class="showCharts" ref="courseStatisticsCharts1"></div>
    <div class="showCharts" ref="courseStatisticsCharts2"></div>
  </div>
</template>

<script>
/* eslint-disable */
import moment from 'moment'
import {queryLearnTimeAndIntegral} from '@/api/system/user'
  export default {
    name: 'courseStatistics',
    data(){
      return{
        loading: false,
        /*   -------搜索框--------*/
        searchParams: {
          bgTm: moment(new Date()).subtract(6, 'days').format('YYYY-MM-DD'),
          endTm: this.$defaultSettings.endTm,
        },
        datax:[],
        datay1:[],
        datay2:[],
        datas: [
          {value:0, name:'视频资料'},
          {value:0, name:'文字资料'},
        ]
      }
    },
    mounted() {
        this.getList()
    },
    methods:{
        getList() {
            this.loading=true
          queryLearnTimeAndIntegral(this.searchParams).then(res=> {
            this.loading=false
            this.datax = []
            this.datay1 = []
            this.datay2 = []
            if(res.code==200) {
              res.data.left[0].value.forEach(e=> {
                this.datax.push(e.name)
                this.datay1.push(e.value)
              })
              res.data.left[1].value.forEach(e1=> {
                this.datay2.push(e1.value)
              })
              this.initEchart1(this.datax,this.datay1,this.datay2)
              if(res.data.right.length!=0) {
                this.initEchart2(res.data.right)
              }else {
                this.initEchart2(this.datas)
              }
            }
          })
        },
      initEchart1(datax,datay1,datay2){
        let myChart = this.$echarts.init(this.$refs.courseStatisticsCharts1);
        let option = {
          backgroundColor: '#fff',
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            top: '12%',
            left: '3%',
            right: '6%',
            bottom: '0',
            containLabel: true
          },
          xAxis: [
            {
              name:"",
              type: 'category',
              data: datax,
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                color: '#666',
                fontSize: '16',
              }
            }
          ],
          yAxis: [
            {
              name:"学时",
              type: 'value',
              scale:true,
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#F3F3F3'
                }
              },
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                color: '#666',
                fontSize: '16',
              }
            },
            {
              name:"浏览量",
              type: 'value',
              scale:true,
              position: 'right',
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#F3F3F3'
                }
              },
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                color: '#666',
                fontSize: '16',
              }
            }
          ],
          series: [
            {
              name: '学时',
              type: 'bar',
              barWidth: '40%',
              data: datay1,
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 1,
                    color: '#4496E2'
                  }, {
                    offset: 0,
                    color: '#4496E2'
                  }]),
                  barBorderRadius: [11, 11, 11, 11],
                },
              },
              label: {
                normal: {
                  show: true,
                  fontSize: 18,
                  fontWeight: 'bold',
                  color: '#676767',
                  position: 'top',
                }
              }
            },
            {
              name: '浏览量',
              type: 'line',
              data: datay2,
              yAxisIndex:'1',
              symbol:'star',/*拐点样式*/
              symbolSize:8, //拐点大小
              itemStyle:{
                normal:{
                  color:'#D2691E'    //拐点颜色
                }
              },
              lineStyle:{
                normal:{
                  color:'#D2691E'  //折线颜色
                }
              },
            }
          ]
        };
        myChart.setOption(option);

        // 监听窗口变化 - 只刷新最后一个图表
        window.onresize = () => {
          myChart.resize();
        }
        // 监听窗口变化 - 多个图表同时刷新
        window.addEventListener('resize', () => {
          myChart.resize();
        })
      },
      initEchart2(datas){
        let myChart2 = this.$echarts.init(this.$refs.courseStatisticsCharts2);
        let option2 = {
          color: ['#1CCFCF','#6ABB3E','#FFCC00','#FF8400','#FF6468','#5569FF'],
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          toolbox: {
            show : true,

          },
          title:{
            text:"占全部积分比例",
            x:'center',
            y:0,
            textStyle: {
              fontSize: '18',
              color: "#333",
              textAlign: 'center',
            }
          },
          legend: {
            orient: 'vertical', //纵向图例
            left: 'center',
            itemWidth: 15,
            itemHeight: 15,
            top: '95%',
            itemGap: 20, //图例item间距
            textStyle: {
              color: '#000',
              fontSize: 14
            }
          },
          series : [
            {
              name:'系列课程',
              type:'pie',
              center: ['50%', '48%'],
              radius : [0, 140],
              label: {
                normal: {
                  position: 'inner',
                  color: "#ddd" ,
                  fontStyle: 'normal' ,
                  fontWeight: 'normal' ,
                  fontSize: 12,
                  lineHeight:20,
                  formatter: function(params) {
                    var str = params.name + '\n' + params.value + "%";
                    return str
                  }
                }
              },

              data: datas
            }
          ]
        };

        myChart2.setOption(option2);

        // 监听窗口变化 - 只刷新最后一个图表
        window.onresize = () => {
          myChart2.resize();
        }
        // 监听窗口变化 - 多个图表同时刷新
        window.addEventListener('resize', () => {
          myChart2.resize();
        })
      },
      onChange(dates, dateStrings) {
//        console.log('From: ', dates[0], ', to: ', dates[1]);
//        console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
        this.searchParams.bgTm = dateStrings[0];
        this.searchParams.endTm = dateStrings[1];
      }
    },
  }
</script>

<style lang="less"  scoped>
  .lf{
    float:left;
  }
  .rf{
    float:right;
  }
  .clearFloat:after{
    content:"";
    display:block;
    clear:both;
  }
  .echartsDiv{
    width:100%;
    height:100%;
    .titleDiv{
      width:100%;
      height:60px;
      padding:0 30px;
      box-sizing: border-box;
      border-bottom:1px solid #E5E5E5;
      p{
        margin:0;
      }
      .lineDiv{
        width: 4px;
        height: 24px;
        background: #4496E2;
        margin:18px 20px 0 0;
      }
      .titleP{
        font-size: 20px;
        font-weight: bold;
        color: #333333;
        line-height:60px;
      }
      .labelP{
        font-size: 18px;
        font-weight: 400;
        color: #000000;
        margin-right:18px;
        line-height:60px;
      }
      /deep/ .ant-input{
        height:40px;
        margin-top:10px;
      }
      /deep/ .ant-btn{
        width: 100px;
        height: 40px;
        background: #4496E2;
        box-shadow: 1px 6px 12px 0 rgba(68, 150, 226, 0.2);
        border-radius: 4px;
        font-size: 16px;
        margin:10px 0 0 16px;
      }
    }
    .showCharts{
      width:50%;
      height:calc( 100% - 60px );
      padding:40px 40px 40px 60px;
      box-sizing: border-box;
      display: inline-block;
    }
  }
</style>